<template>
   <div class="back">
        <div class="container">
            <div class="title">票务系统客户端</div>

            <div class="form-group">
                <div class="controls" style="margin-top: 80px;">
                    <div class="login-img">
                        <img src="../assets/img/user.png" alt="">
                    </div>
                    <input class="form-control" type="text" name="account" v-model="account" placeholder="账号" @keyup.enter.native="submit">
                </div>
            </div>

            <div class="form-group">
                <div class="controls">
                    <div class="login-img">
                        <img src="../assets/img/password.png" alt="">
                    </div>
                    <input class="form-control" type="password" name="password" v-model="password" placeholder="密码" @keyup.enter.native="submit">
                </div>
            </div>

            <div class="form-submit">
                <button type="submit" class="submit" id="submit" @click="handleLogin()">登录</button>
            </div>

        </div>
    </div>
</template>
  
<script setup>
import { useUserStore } from "@/store";
import router from "@/router";
import { ref, onMounted} from "vue";

const userStore = useUserStore();
const account = ref('admin');
const password = ref('Mz90023120@'); 

/**
 * 登录
 */
 function handleLogin() {
    localStorage.removeItem("token");
    console.log("password:", password.value);
    let data = {
            account : account.value,
            password : password.value
        }
        console.log("data:", data);
    userStore
        

        .login(data)
        .then((res) => {
            console.log('222',res);
            if (res.code == 1) {
                window.location.href = "#/home";  
                // this.$router.push('#/home'); 
            }
        })
        .catch(() => {

        })
        .finally(() => {
            
        });
}

/**
 * 获取验证码
 */
// function getCaptcha() {
//     getCaptchaApi().then(({ data }) => {
//         loginData.value.captchaKey = data.captchaKey;
//         captchaBase64.value = data.captchaBase64;
//     });
// }

</script>
  
<style lang='scss' scoped>
* {
    margin: 0;
    padding: 0;
}

.back {
    width: 100%;
    height: 100%;
    background-image: url(../assets/img/login.jpg);
    background-repeat: repeat;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 0;
    overflow: auto;

    .container {
        width: 640px;
        height: 720px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -45%);
        border-radius: 20px;
        background-color: #FFFFFF;
        box-shadow: 0px 0px 10px 10px rgba(18, 89, 216, 0.08);


        .title {
            text-align: center;
            font-size: 38px;
            font-weight: 500;
            color: #1165E2;
            margin-top: 100px;
        }
        

    }
}



.controls {
    text-align: center;
    margin: 0 auto;
    margin-top: 50px;
    width: 450px;
    height: 60px;
    font-size: 20px;
    font-weight: 500;
    color: #3576E5;
    background-color: rgba(222, 233, 252, 1);
    border-radius: 60px;
}

.login-img {
    width: 70px;
    height: 60px;
    float: left;
    text-align: center;
}

.login-img img {
    width: 40px;
    height: 40px;
    margin-top: 10px;
}

.form-control {
    outline: none;
    float: right;
    width: 380px;
    height: 60px;
    border: none;
    font-size: 20px;
    font-weight: 500;
    color: #3576E5;
    background-color: rgba(222, 233, 252, 1);
    border-radius: 60px;
}

.form-control::-webkit-input-placeholder {
    color: #3576E5;
    opacity: 0.75;
    font-weight: 400;
    font-size: 20px;
}

.form-submit {
    margin-top: 50px;
    text-align: center;
}

.submit {
    width: 450px;
    height: 60px;
    border: none;
    font-size: 20px;
    font-weight: 500;
    color: #FFFFFF;
    background-color: #4389F2;
    border-radius: 60px;
    cursor: pointer;
}






</style>